<template>
  <canvas ref="canvas" width="700" height="1300"></canvas>

</template>
<script setup lang="ts">
import { useTemplateRef } from 'vue'

const canvasRef = useTemplateRef('canvas')

const svg =
  '<svg\n' +
  '      xmlns="http://www.w3.org/2000/svg"\n' +
  '      width="101.25" height="25"\n' +
  '      fill="none" stroke="black" stroke-width="1"\n' +
  '      stroke-linecap="round" stroke-linejoin="round"\n' +
  '    ><path d="M5.63 2.5 1.88 15.63 M6.25 2.5 2.5 15.63 M8.75 6.25 7.5 11.25 M3.75 2.5 13.13 2.5 12.5 6.25 12.5 2.5 M4.38 8.75 8.13 8.75 M0 15.63 9.38 15.63 10.63 12.5 8.75 15.63 M16.88 16.25 15 22.81 M17.19 16.25 15.31 22.81 M19.38 18.75 19.06 19.06 19.38 19.38 19.69 19.06 19.69 18.75 19.38 18.44 19.06 18.44 18.44 18.75 17.19 20 16.56 20.31 15.94 20.31 M16.56 20.31 17.19 20.63 17.81 22.5 18.13 22.81 M16.56 20.31 16.88 20.63 17.5 22.5 17.81 22.81 18.44 22.81 19.06 22.5 19.69 21.56 M15.94 16.25 17.19 16.25 M23.13 8.13 34.38 8.13 M23.13 11.88 34.38 11.88 M41.88 2.5 38.13 15.63 M42.5 2.5 38.75 15.63 M40 11.25 41.25 8.75 42.5 7.5 43.75 6.88 45 6.88 46.25 7.5 46.88 8.13 46.88 9.38 45.63 13.13 45.63 15 46.25 15.63 M45 6.88 46.25 8.13 46.25 9.38 45 13.13 45 15 45.63 15.63 47.5 15.63 48.75 14.38 49.38 13.13 M40 2.5 42.5 2.5 M50.63 9.38 51.25 8.13 52.5 6.88 54.38 6.88 55 7.5 55 9.38 53.75 13.13 53.75 14.38 55 15.63 M53.75 6.88 54.38 7.5 54.38 9.38 53.13 13.13 53.13 14.38 53.75 15 55 15.63 55.63 15.63 57.5 15 58.75 13.75 60 11.88 60.63 9.38 60.63 6.88 60 6.88 60.63 8.13 M65 10 76.25 10 M83.75 2.5 82.5 15.63 M84.38 2.5 83.13 14.38 M88.75 2.5 82.5 15.63 M88.75 2.5 87.5 15.63 M89.38 2.5 88.13 14.38 M93.75 2.5 87.5 15.63 M81.88 2.5 86.25 2.5 M91.88 2.5 95.63 2.5 M97.81 16.25 96.88 16.56 96.25 17.5 95.94 19.06 95.94 20 96.25 21.56 96.88 22.5 97.81 22.81 98.44 22.81 99.38 22.5 100 21.56 100.31 20 100.31 19.06 100 17.5 99.38 16.56 98.44 16.25 97.81 16.25 M97.81 16.25 97.19 16.56 96.88 16.88 96.56 17.5 96.25 19.06 96.25 20 96.56 21.56 96.88 22.19 97.19 22.5 97.81 22.81 M98.44 22.81 99.06 22.5 99.38 22.19 99.69 21.56 100 20 100 19.06 99.69 17.5 99.38 16.88 99.06 16.56 98.44 16.25 "/></svg>'

const img = new Image()
img.onload = function () {
  canvasRef.value?.getContext('2d')?.drawImage(img, 0, 0)
}
img.src = 'data:image/svg+xml;base64,' + btoa(svg)

</script>
<style scoped>

</style>
